<template>
    <div class="card_border" :style="{backgroundColor:color,color:fontcolor}">
        <div class="card_border_content">
            <img class="iconclass"  :src="iconpath">
            <div class="content">
                <span class="titleclass" v-text="title"></span><br>
                <span class="contentclass">选择一本你想学习、训练的课本，开始你的学习训练。</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data:function(){
        return {

        }
    },
    props:["iconpath","title","color","fontcolor"]
}
</script>

<style scoped>
.card_border{
    /* border: 1px solid red; */
    border-radius: 8px;
    margin: 2vh 3vw;
    position: relative;
    
    /* background-color: aqua; */
}
.card_border_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 5vw;
    /* border: 1px solid red; */
    /* margin: 2vh 5vw; */
    border-radius: 8px;

}
.content{
    display: inline;
    padding-left: 20px;
    /* color: white; */
}
.iconclass{
    height: 15vh;
}
.titleclass{
    font-size: 3vh;
    line-height: 40px;
}
.contentclass{
    font-size:2vh;
}
</style>
